<script type="text/javascript">
	$(document).ready(function () {
		var theme = 'darkblue';
        var mkaryawan_task = "CREATE";
        var btn_mkaryawan_task = "";
		var gridExpandVar = 0;
		var formExpandVar = 0;
        var editrow = -1;
		
		
		$("#jqxNavigationBar").jqxNavigationBar({ width: '100%', height: 420, sizeMode: 'auto', theme: theme });
		
		$("#mkaryawan_gridExpander").jqxExpander({ width: '100%', theme: theme, showArrow: true });
        $("#mkaryawan_formExpander").jqxExpander({ width: '100%', theme: theme, showArrow: true, expanded: false });
		
		/* START DATA */
		// prepare the data
		var source =
		{
			datatype: "json",
			datafields: [
				{ name: 'NIK' },
				{ name: 'GRADE' },
				{ name: 'KODEUNIT'},
				{ name: 'KODEJAB'},
				{ name: 'TGLREVISI'},
				{ name: 'NAMAKAR'}
			],
			id: 'NIK',
			url: 'index.php?c=c_mkaryawan&m=mkaryawan_list',
			root: 'data'
		};
		var dataAdapter = new $.jqx.dataAdapter(source);


		var initrowdetails = function (index, parentElement, gridElement) {
            var tabsdiv = null;
            var information = null;
            //var notes = null;
            tabsdiv = $($(parentElement).children()[0]);

            var rows = $("#jqxgrid").jqxGrid('getrows');

            if (tabsdiv != null) {
                information = $.find('.information' + index);
                //notes = $.find('.notes' + index);

                var container = $('<div style="margin: 5px;"></div>');
                container.appendTo($(information));
                var photocolumn = $('<div style="float: left; width: 15%;"></div>');
                var leftcolumn = $('<div style="float: left; width: 45%;"></div>');
                var rightcolumn = $('<div style="float: left; width: 40%;"></div>');
                container.append(photocolumn);
                container.append(leftcolumn);
                container.append(rightcolumn);

                var datarecord = rows[index];

                var photo = $("<div class='jqx-rc-all' style='margin: 10px;'><b>Photo:</b></div>");
                var image = $("<div style='margin-top: 10px;'></div>");
                //var imgurl = './assets/images/' + datarecord.firstname.toLowerCase() + '.png';
                var imgurl = './assets/images/photo.png';
                var img = $('<img height="60" src="' + imgurl + '"/>');
                image.append(img);
                image.appendTo(photo);
                photocolumn.append(photo);

                var nip = "<div style='margin: 10px;'><b>NIP:</b> " + datarecord.person_code + "</div>";
                var nama = "<div style='margin: 10px;'><b>Nama:</b> " + datarecord.person_name + "</div>";
                var telp = "<div style='margin: 10px;'><b>Telp:</b> " + datarecord.person_telp + "</div>";
                var hp = "<div style='margin: 10px;'><b>HP:</b> " + datarecord.person_hp + "</div>";
                $(leftcolumn).append(nip);
                $(leftcolumn).append(nama);
                $(leftcolumn).append(telp);
                $(leftcolumn).append(hp);

                var alamat = "<div style='margin: 10px;'><b>Alamat:</b> " + datarecord.person_address + "</div>";
                var email = "<div style='margin: 10px;'><b>Email:</b> " + datarecord.person_email + "</div>";
                //var phone = "<div style='margin: 10px;'><b>Phone:</b> " + datarecord.homephone + "</div>";
                //var hiredate = "<div style='margin: 10px;'><b>Hire Date:</b> " + datarecord.hiredate + "</div>";

                $(rightcolumn).append(alamat);
                $(rightcolumn).append(email);
                //$(rightcolumn).append(phone);
                //$(rightcolumn).append(hiredate);

                //var notescontainer = $('<div style="white-space: normal; margin: 5px;"><span>' + datarecord.notes + '</span></div>');
                //$(notes).append(notescontainer);
                $(tabsdiv).jqxTabs({ width: 600, height: 170, theme: theme });
            }
        }

		// set rows details.
        $("#jqxgrid").bind('bindingcomplete', function (event) {
            if (event.target.id == "jqxgrid") {
                $("#jqxgrid").jqxGrid('beginupdate');
                var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                var rows = $("#jqxgrid").jqxGrid('getrows');
                for (i = 0; i < datainformation.rowscount; i++) {
                    var hidden = i > 0 ? true : false;
                    //$("#jqxgrid").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 220, hidden);
                    $("#jqxgrid").jqxGrid('setrowdetails', i, 
                    	"<div class='tabs"+i+"' style='margin: 10px; white-space:normal;'>"+
                            "<ul style='margin-left: 30px;'>"+
                            	"<li>"+rows[i].person_code+"</li>"+
                            "</ul>"+
                            "<div class='information"+i+"'></div>"+
                   		"</div>", 220, true);
                }
                $("#jqxgrid").jqxGrid('resumeupdate');
            }
        });
		

		$("#jqxgrid").jqxGrid(
		{
			width: '100%',
			source: dataAdapter,
			theme: theme,
			sortable: true,
            pageable: true,
            autoheight: true,
            rowdetails: true,
            initrowdetails: initrowdetails,
			columns: [
				{ text: 'NIK', dataField: 'NIK', width: 100 },
				{ text: 'GRADE', dataField: 'GRADE', width: 180 },
				{ text: 'KODEUNIT', dataField: 'KODEUNIT', width: 100 },
				{ text: 'KODEJAB', dataField: 'KODEJAB', width: 150 },
				{ text: 'TGLREVISI', datafield: 'TGLREVISI', width: 250, cellsformat: "D" },
				{ text: 'NAMAKAR', dataField: 'NAMAKAR', width: 150 },
				{ text: 'Edit', datafield: 'Edit', width: 125, columntype: 'button', cellsrenderer: function () {
					return "Edit";
				}, buttonclick: function (row) {
					// open form Create/Update.
					editrow = row;
					
					// get the clicked row's data and initialize the input fields.
					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
					cu_formSet(dataRecord);
				}
				}
			]
		});
		/* END DATA */

		/* START FORM */
		//initialize field
        $("#mkaryawan_nik").addClass('jqx-input');
        $("#mkaryawan_nik").width(200);
        $("#mkaryawan_nik").height(23);
        $("#mkaryawan_grade").addClass('jqx-input');
        $("#mkaryawan_grade").width(200);
        $("#mkaryawan_grade").height(23);
        $("#mkaryawan_kodeunit").addClass('jqx-input');
        $("#mkaryawan_kodeunit").width(200);
        $("#mkaryawan_kodeunit").height(23);
        $("#mkaryawan_kodejab").addClass('jqx-input');
        $("#mkaryawan_kodejab").width(200);
        $("#mkaryawan_kodejab").height(23);
		$("#mkaryawan_tglrevisi").addClass('jqx-input');
        $("#mkaryawan_tglrevisi").width(200);
        $("#mkaryawan_tglrevisi").height(23);
		$("#mkaryawan_namakar").addClass('jqx-input');
        $("#mkaryawan_namakar").width(200);
        $("#mkaryawan_namakar").height(23);
		
		var date = new Date();
        var currentYear = date.getFullYear();
		var currentMonth = date.getMonth();
        var nextYear = currentYear+1;
        var thnAjaran = currentYear+"/"+nextYear;
        date.setFullYear(currentYear, currentMonth, 1);
        $('#mkaryawan_tglrevisi').jqxDateTimeInput({ theme: theme, value: $.jqx._jqxDateTimeInput.getDateTime(date) });
		
		// initialize the popup window and buttons.
		$("#createBtn").jqxButton({ theme: theme });
		$("#Save").jqxButton({ theme: theme });
		$("#Cancel").jqxButton({ theme: theme });
        /* END FORM */
		
		/* START ACTION */
        // update the edited row when the user clicks the 'Save' button.
        $("#Save").click(function () {
			var mkaryawan_niklama_field = "";
        	var mkaryawan_nik_field = "";
        	var mkaryawan_grade_field = "";
        	var mkaryawan_kodeunit_field = "";
        	var mkaryawan_kodejab_field = "";
        	var mkaryawan_tglrevisi_field = "";
        	var mkaryawan_namakar_field = "";
        	
			if($("#mkaryawan_niklama").val() !== null || $("#mkaryawan_niklama").val() !== ''){
				mkaryawan_niklama_field = $("#mkaryawan_niklama").val();
			}
			if($("#mkaryawan_nik").val() !== null || $("#mkaryawan_nik").val() !== ''){
				mkaryawan_nik_field = $("#mkaryawan_nik").val();
			}
			if($("#mkaryawan_grade").val() !== null || $("#mkaryawan_grade").val() !== ''){
				mkaryawan_grade_field = $("#mkaryawan_grade").val();
			}
			if($("#mkaryawan_kodeunit").val() !== null || $("#mkaryawan_kodeunit").val() !== ''){
				mkaryawan_kodeunit_field = $("#mkaryawan_kodeunit").val();
			}
			if($("#mkaryawan_kodejab").val() !== null || $("#mkaryawan_kodejab").val() !== ''){
				mkaryawan_kodejab_field = $("#mkaryawan_kodejab").val();
			}
			if($('#mkaryawan_tglrevisi').jqxDateTimeInput('getDate') !== null || $('#mkaryawan_tglrevisi').jqxDateTimeInput('getDate') !== ''){
				var periode_awal = $('#mkaryawan_tglrevisi').jqxDateTimeInput('getDate');
				mkaryawan_tglrevisi_field = $.jqx.dataFormat.formatdate(periode_awal, 'yyyy-MM-dd');
			}
        	if($("#mkaryawan_namakar").val() !== null || $("#mkaryawan_namakar").val() !== ''){
				mkaryawan_namakar_field = $("#mkaryawan_namakar").val();
			}
        	
        	var row = {
                	task: mkaryawan_task,
					mkaryawan_niklama: mkaryawan_niklama_field,
                	mkaryawan_nik: mkaryawan_nik_field,
            		mkaryawan_grade: mkaryawan_grade_field,
					mkaryawan_kodeunit: mkaryawan_kodeunit_field,
					mkaryawan_kodejab: mkaryawan_kodejab_field,
        			mkaryawan_tglrevisi: mkaryawan_tglrevisi_field,
					mkaryawan_namakar: mkaryawan_namakar_field
        	};
        	
            if (editrow >= 0) {
                //edit row
            	$.ajax({
                    type: 'POST',
                    url: 'index.php?c=c_setup&m=get_action',
                    data: row,
                    success: function(response){
                        //if(response==1){
                            $('#jqxgrid').jqxGrid('updatebounddata');
                            gridExpand();
                        //}
                    }
                });
            }else{
            	//add row
            	$.ajax({
                    type: 'POST',
                    url: 'index.php?c=c_mkaryawan&m=get_action',
                    data: row,
                    success: function(response){
                        if(response==1){
                            $('#jqxgrid').jqxGrid('updatebounddata');
                            gridExpand();
                        }
                    }
                });
            	
            }
        });

        $("#Cancel").click(function () {
        	cu_formReset();
        	$("#popupWindow").jqxWindow('hide');
        	gridExpand();
        });
		
		$("#createBtn").click(function () {
        	btn_mkaryawan_task = "CREATE";
        	formExpand();
        	
        	$("#mkaryawan_id").val(0);
        });
        
        /* END ACTION */

        /* START FUNCTION */
		function cu_formReset(){
            /*$("#mkaryawan_niklama").val("");
			 $("#mkaryawan_nik").jqxMaskedInput('maskedValue', thnAjaran);
            $("#mkaryawan_grade").jqxComboBox('clearSelection');
            $('#mkaryawan_tglrevisi').jqxDateTimeInput('setDate', new Date(2012, 0, 1));
            $('#mkaryawan_periode_akhir').jqxDateTimeInput('setDate', new Date(2012, 0, 1));
            $("#mkaryawan_coordinator").val('');
            $("#mkaryawan_quota_adviser").val('');
            $('#mkaryawan_cuForm').jqxValidator('hide');*/
        }

        function cu_formSet(dataRecord){
            btn_mkaryawan_task = "UPDATE";
			
			var arr_tglrevisi = dataRecord.TGLREVISI.split('-');
			var thn = arr_tglrevisi[0];
			var bln = arr_tglrevisi[1];
			var tgl = arr_tglrevisi[2];
			var set_tglrevisi = new Date(thn, (bln - 1), tgl);
			
			$("#mkaryawan_niklama").val(dataRecord.NIK);
			$("#mkaryawan_nik").val(dataRecord.NIK);
			$("#mkaryawan_grade").val(dataRecord.GRADE);
			$("#mkaryawan_kodeunit").val(dataRecord.KODEUNIT);
			$("#mkaryawan_kodejab").val(dataRecord.KODEJAB);
			$("#mkaryawan_tglrevisi").jqxDateTimeInput('setDate', set_tglrevisi);
			$("#mkaryawan_namakar").val(dataRecord.NAMAKAR);
            
            formExpand();
        }
		
        function gridExpand(){
			gridExpandVar = 1;
			formExpandVar = 0;
        	$("#jqxNavigationBar").jqxNavigationBar('expandAt', 0);
        }
        function formExpand(){
			gridExpandVar = 0;
			formExpandVar = 1;
        	$("#jqxNavigationBar").jqxNavigationBar('expandAt', 1);
        }
        /* END FUNCTION */
		
		$('#jqxNavigationBar').bind('expandedItem', function (event) {
			if((event.item == 1) && (formExpandVar == 1) && (btn_mkaryawan_task == "UPDATE")){
				mkaryawan_task = "UPDATE";
			}else{
				mkaryawan_task = "CREATE";
			}
		});

	});
</script>

<div id='jqxNavigationBar'>
	<!--Header-->
	<div>Data</div>
	<!--Content-->
	<div>
		<div id="jqxgrid"></div>
	</div>
	<!--Header-->
	<div>Form Create/Update</div>
	<!--Content-->
	<div>
		<form id="mkaryawanForm" action="#">
		<table class="register-table">
			<tr style="display: none;">
				<td align="right">NIK LAMA:</td>
				<td align="left"><input id="mkaryawan_niklama" /></td>
			</tr>
			<tr>
				<td align="right">NIK:</td>
				<td align="left"><input id="mkaryawan_nik" /></td>
			</tr>
			<tr>
				<td align="right">GRADE:</td>
				<td align="left"><input id="mkaryawan_grade" /></td>
			</tr>
			<tr>
				<td align="right">KODEUNIT:</td>
				<td align="left"><input id="mkaryawan_kodeunit" /></td>
			</tr>
			<tr>
				<td align="right">KODEJAB:</td>
				<td align="left"><input id="mkaryawan_kodejab" /></td>
			</tr>
			<tr>
				<td align="right">TGLREVISI:</td>
				<td align="left"><div id="mkaryawan_tglrevisi" ></div></td>
			</tr>
			<tr>
				<td align="right">NAMAKAR:</td>
				<td align="left"><input id="mkaryawan_namakar" /></td>
			</tr>
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
			</tr>
		</table>
		</form>
	</div>
</div>

<div style="margin-top: 10px;">
	<input id="createBtn" type="button" value="Create Data" />
</div>
